<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的收藏-删除</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../../css/app.css" />
		<style>
			.inputBox{display: none}
			.cancelBtn{display: none}
			.foter-btn{display: none}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的收藏</h1>
			<a class="mui-icon mui-icon-trash mui-pull-right deleteBtn"></a>
			<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right cl6 cancelBtn">取消</button>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" id="list1">
					
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox inputBox">
							<input name="checkbox" value="Item 2" type="checkbox">
						</div>
						<img class="mui-media-object mui-pull-left mui-sc-img" src="../../../images/cbd.jpg">
						<div class="mui-media-body mui-sc-list">
							<p class="mui-sc-p">北京密云1号仓库</p>
							<div class="dsf">
							<p class="fl"><lable>位置:</lable><p class="fr w85" >烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></p>
							</div>
							<p><lable>价格:</lable><i>100/小时</i></p>
							<p><lable>状态:</lable><i>可租赁300个货位</i></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="list2">
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox inputBox">
							<input name="checkbox" value="Item 2" type="checkbox">
						</div>
						<img class="mui-media-object mui-pull-left mui-sc-img" src="../../../images/cbd.jpg">
						<div class="mui-media-body mui-sc-list">
							<p class="mui-sc-p">北京密云1号仓库</p>
							<div class="dsf">
							<p class="fl"><lable>位置:</lable><p class="fr w85" >烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></p>
							</div>
							<p><lable>价格:</lable><i>100/小时</i></p>
							<p><lable>状态:</lable><i>可租赁300个货位</i></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="list3">
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox inputBox">
							<input name="checkbox" value="Item 2" type="checkbox">
						</div>
						<img class="mui-media-object mui-pull-left mui-sc-img" src="../../../images/cbd.jpg">
						<div class="mui-media-body mui-sc-list">
							<p class="mui-sc-p">北京密云1号仓库</p>
							<div class="dsf">
							<p class="fl"><lable>位置:</lable><p class="fr w85" >烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></p>
							</div>
							<p><lable>价格:</lable><i>100/小时</i></p>
							<p><lable>状态:</lable><i>可租赁300个货位</i></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="list4">
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox inputBox">
							<input name="checkbox" value="Item 2" type="checkbox">
						</div>
						<img class="mui-media-object mui-pull-left mui-sc-img" src="../../../images/cbd.jpg">
						<div class="mui-media-body mui-sc-list">
							<p class="mui-sc-p">北京密云1号仓库</p>
							<div class="dsf">
							<p class="fl"><lable>位置:</lable><p class="fr w85" >烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></p>
							</div>
							<p><lable>价格:</lable><i>100/小时</i></p>
							<p><lable>状态:</lable><i>可租赁300个货位</i></p>
						</div>
					</a>
				</li>
				
				<li class="mui-table-view-cell mui-media" id="list5">
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox inputBox">
							<input name="checkbox" value="Item 2" type="checkbox">
						</div>
						<img class="mui-media-object mui-pull-left mui-sc-img" src="../../../images/cbd.jpg">
						<div class="mui-media-body mui-sc-list">
							<p class="mui-sc-p">北京密云1号仓库</p>
							<div class="dsf">
							<p class="fl"><lable>位置:</lable><p class="fr w85" >烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></p>
							</div>
							<p><lable>价格:</lable><i>100/小时</i></p>
							<p><lable>状态:</lable><i>可租赁300个货位</i></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="list6">
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox inputBox">
							<input name="checkbox" value="Item 2" type="checkbox">
						</div>
						<img class="mui-media-object mui-pull-left mui-sc-img" src="../../../images/cbd.jpg">
						<div class="mui-media-body mui-sc-list">
							<p class="mui-sc-p">北京密云1号仓库</p>
							<div class="dsf">
							<p class="fl"><lable>位置:</lable><p class="fr w85" >烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></p>
							</div>
							<p><lable>价格:</lable><i>100/小时</i></p>
							<p><lable>状态:</lable><i>可租赁300个货位</i></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="list7">
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox inputBox">
							<input name="checkbox" value="Item 2" type="checkbox">
						</div>
						<img class="mui-media-object mui-pull-left mui-sc-img" src="../../../images/cbd.jpg">
						<div class="mui-media-body mui-sc-list">
							<p class="mui-sc-p">北京密云1号仓库</p>
							<div class="dsf">
							<p class="fl"><lable>位置:</lable><p class="fr w85" >烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p></p>
							</div>
							<p><lable>价格:</lable><i>100/小时</i></p>
							<p><lable>状态:</lable><i>可租赁300个货位</i></p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media"  id="list8">
					<a href="javascript:;" class="wspin">
						<div class="mui-sc-dele mui-checkbox">
						</div>
					</a>
				</li>

			</ul>
			<div class="foter-btn">
				<button type="button" class="quanxuan mui-btn-sz allChose">全选</button>
				<button type="button" class="shanchu mui-btn-sz">删除</button>
			</div>
		</div>
	<script src="../../../js/jquery-3.2.1.min.js"></script>
	</body>
<script>
	$(function () {
		$(".deleteBtn").click(function () {
			$(this).hide();    //删除图片隐藏
			$(".cancelBtn").show();   //取消字体显示
			$(".inputBox").show();    //左边复选框显示
			$(".foter-btn").show();   //底部安钮显示
        });
		$(".cancelBtn").click(function () {
            $(".deleteBtn").show();    //删除图片显示
            $(this).hide();   //取消字体隐藏
            $(".inputBox").hide();    //左边复选框隐藏
            $(".foter-btn").hide();   //底部安钮隐藏
        });
		var switched = true;   //变量控制全选或者取消
		var idArr = [];  //存储每一项id的数组
		var idJson = {'a':idArr};  //传到后天的id数据json
		$(".allChose").click(function(){
		    if(switched){
                idJson.a = [];  //每次把数组置空
                $(".inputBox input").prop('checked',true);    //所有复选框选中
                switched = false;
                var num = $(".mui-table-view").children().length;    //列表的个数
                for(var i=0; i<num; i++){
                    idJson.a.push($(".mui-table-view").children().eq(i).attr("id"));    //把列表id放到数组里面
				};
			}else{
                $(".inputBox input").prop('checked',false);    //所有复选框取消
                idJson.a = [];    //列表的id清空
                switched = true;
			}
		});
		$(".inputBox input").click(function () {   //点击每一项选择框
			var isChose = $(this).is(':checked');
			if(!isChose){     //当复选框没有选中的时候
				var nowId = $(this).parent().parent().parent().attr("id");       //获取当前列表的id
				var oIndex = idJson.a.indexOf(nowId);   //当前id值在数组中的索引
                idJson.a.splice(oIndex,1);   //当前最新的id数组
			}else{           //当复选框选中的时候
                var nowIdx = $(this).parent().parent().parent().attr("id");    //获取当前列表的id
                idJson.a.push(nowIdx);
			}
        });


    })
</script>
</html>
